<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="static/img/20161107190418.ico">
    <title>PPC BigData Portal | {% block title %}Base{% endblock %}</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="static/css/ionicons.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="static/plugins/pace/pace.min.css">
    {% block headpre %}

    {% endblock %}
    <link rel="stylesheet" href="static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="static/css/main.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link rel="stylesheet" href="static/dist/css/skins/skin-blue.min.css">
    <!-- Pace style -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="static/js/html5shiv.min.js"></script>
    <script src="static/js/respond.min.js"></script>
    <!-- jQuery 2.2.3 -->
    <script src="static/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="static/bootstrap/js/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="static/dist/js/app.min.js"></script>
    <!-- PACE -->
    <script src="static/plugins/pace/pace.min.js"></script>
    <script src="static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <script src="static/plugins/fastclick/fastclick.js"></script>
    <![endif]-->
    {% block head %}

    {% endblock %}
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="pace  pace-inactive">
    <div class="pace-progress" data-progress-text="100%" data-progress="99"
         style="transform: translate3d(100%, 0px, 0px);">
        <div class="pace-progress-inner"></div>
    </div>
    <div class="pace-activity"></div>
</div>
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">

        <!-- Logo -->
        <a href="/" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini">
               <b>PPC</b></span>
            </span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg">
                <b>PPC</b> BigData</span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- User Account Menu -->
                    <li class="dropdown user user-menu">
                        <!-- Menu Toggle Button -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <!-- The user image in the navbar-->
                            <img src="static/dist/img/20161010140103.jpg" class="user-image" alt="User Image">
                            <!-- hidden-xs hides the username on small devices so only the image appears. -->
                            <span class="hidden-xs" id="currentname">{{ current_user.get_name() }}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- The user image in the menu -->
                            <li class="user-header">
                                <img src="static/dist/img/20161010140103.jpg" class="img-circle" alt="User Image">

                                <p>
                                    {{ current_user.get_name() }} - Developer of {{ current_user.get_cn() }}
                                    <small>Member since 2016</small>
                                </p>
                            </li>

                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="/admin" class="btn btn-default btn-flat">Admin</a>
                                </div>
                                <div class="pull-right">
                                    <a href="/logout" class="btn btn-default btn-flat">Sign out</a>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">

            <!-- Sidebar Menu -->
            <ul class="sidebar-menu" id="sidebar_menu">
                <li class="header">选 项</li>

            </ul>
            <!-- /.sidebar-menu -->
        </section>

        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                {% block contentheader %}{% endblock %}
                <small>{% block contentsmallheader %}{% endblock %}</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li class="active">Here</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">

            {% block content %}{% endblock %}

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <!-- To the right -->
        <div class="pull-right hidden-xs">
            <b class=""><a href="JavaScript:void(0);" onclick="go_high();return"> [High一下]</a></b>
        </div>
        <div class="pull-right hidden-xs">
            BigData Team
        </div>


        <!-- Default to the left -->
        <strong>Copyright &copy; 2016 by <a href="http://www.ppcredit.com/">拍拍信</a> All rights reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
            <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane active" id="control-sidebar-home-tab">
                <h3 class="control-sidebar-heading">Recent Activity</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript::;">
                            <i class="menu-icon fa fa-birthday-cake bg-red"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                                <p>Will be 23 on April 24th</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

                <h3 class="control-sidebar-heading">Tasks Progress</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript::;">
                            <h4 class="control-sidebar-subheading">
                                Custom Template Design
                                <span class="pull-right-container">
                  <span class="label label-danger pull-right">70%</span>
                </span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

            </div>
            <!-- /.tab-pane -->
            <!-- Stats tab content -->
            <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
            <!-- /.tab-pane -->
            <!-- Settings tab content -->
            <div class="tab-pane" id="control-sidebar-settings-tab">
                <form method="post">
                    <h3 class="control-sidebar-heading">General Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Report panel usage
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Some information about this general settings option
                        </p>
                    </div>
                    <!-- /.form-group -->
                </form>
            </div>
            <!-- /.tab-pane -->
        </div>
    </aside>
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->
<script type="text/javascript">
    $(document).ajaxStart(function () {
        Pace.restart();
    });
    function go_high() {
        (function () {
            function c() {
                var e = document.createElement("link");
                e.setAttribute("type", "text/css");
                e.setAttribute("rel", "stylesheet");
                e.setAttribute("href", f);
                e.setAttribute("class", l);
                document.body.appendChild(e)
            }

            function h() {
                var e = document.getElementsByClassName(l);
                for (var t = 0; t < e.length; t++) {
                    document.body.removeChild(e[t])
                }
            }

            function p() {
                var e = document.createElement("div");
                e.setAttribute("class", a);
                document.body.appendChild(e);
                setTimeout(function () {
                    document.body.removeChild(e)
                }, 100)
            }

            function d(e) {
                return {height: e.offsetHeight, width: e.offsetWidth}
            }

            function v(i) {
                var s = d(i);
                return s.height > e && s.height < n && s.width > t && s.width < r
            }

            function m(e) {
                var t = e;
                var n = 0;
                while (!!t) {
                    n += t.offsetTop;
                    t = t.offsetParent
                }
                return n
            }

            function g() {
                var e = document.documentElement;
                if (!!window.innerWidth) {
                    return window.innerHeight
                } else if (e && !isNaN(e.clientHeight)) {
                    return e.clientHeight
                }
                return 0
            }

            function y() {
                if (window.pageYOffset) {
                    return window.pageYOffset
                }
                return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
            }

            function E(e) {
                var t = m(e);
                return t >= w && t <= b + w
            }

            function S() {
                var e = document.createElement("audio");
                e.setAttribute("class", l);
                e.src = i;
                e.loop = false;
                e.addEventListener("canplay", function () {
                    setTimeout(function () {
                        x(k)
                    }, 500);
                    setTimeout(function () {
                        N();
                        p();
                        for (var e = 0; e < O.length; e++) {
                            T(O[e])
                        }
                    }, 15500)
                }, true);
                e.addEventListener("ended", function () {
                    N();
                    h()
                }, true);
                e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
                document.body.appendChild(e);
                e.play()
            }

            function x(e) {
                e.className += " " + s + " " + o
            }

            function T(e) {
                e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
            }

            function N() {
                var e = document.getElementsByClassName(s);
                var t = new RegExp("\\b" + s + "\\b");
                for (var n = 0; n < e.length;) {
                    e[n].className = e[n].className.replace(t, "")
                }
            }

            var e = 30;
            var t = 30;
            var n = 350;
            var r = 350;
            var i = "static/audio/harlem-shake.mp3";
            var s = "mw-harlem_shake_me";
            var o = "im_first";
            var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
            var a = "mw-strobe_light";
            var f = "static/css/harlem-shake-style.css";
            var l = "mw_added_css";
            var b = g();
            var w = y();
            var C = document.getElementsByTagName("*");
            var k = null;
            for (var L = 0; L < C.length; L++) {
                var A = C[L];
                if (v(A)) {
                    if (E(A)) {
                        k = A;
                        break
                    }
                }
            }
            if (A === null) {
                console.warn("Could not find a node of the right size. Please try a different page.");
                return
            }
            c();
            S();
            var O = [];
            for (var L = 0; L < C.length; L++) {
                var A = C[L];
                if (v(A)) {
                    O.push(A)
                }
            }
        })()
    }
    {#    $.ajax({#}
    {#        url: "/role", success: function (data) {#}
    {#            for (var i = 1; i < 10; i++) {#}
    {#                if (data.data.hasOwnProperty(i.toString())) {#}
    {#                    $('#sidebar_menu').append(data.data[i.toString()]);#}
    {#                    for (var key in data.data) {#}
    {#                        if (i.toString() < key && key < (i + 1).toString()) {#}
    {#                            $('#menu' + i.toString()).append(data.data[key]);#}
    {#                        }#}
    {#                    }#}
    {#                }#}
    {#            }#}
    {#            window.setTimeout("add_class()", 100);#}
    {#            var count_all = 0;#}
    {#            if (data.data.hasOwnProperty('4.1')) {#}
    {#                $.ajax({#}
    {#                    url: "/monitor_get_latest_error", success: function (data1) {#}
    {#                        var count_oozie = data1.data.count_oozie;#}
    {#                        if (count_oozie > 0) {#}
    {#                            $('#monitoroozie span').append('<small class="label pull-right bg-red">' + count_oozie + '</small>');#}
    {#                        }#}
    {#                        var count_ppdsync = data1.data.count_ppdsync;#}
    {#                        if (count_ppdsync > 0) {#}
    {#                            $('#monitorppdsync span').append('<small class="label pull-right bg-red">' + count_ppdsync + '</small>');#}
    {#                        }#}
    {#                        var count_kettle = data1.data.count_kettle;#}
    {#                        if (count_kettle > 0) {#}
    {#                            $('#monitorkettle span').append('<small class="label pull-right bg-red">' + count_kettle + '</small>');#}
    {#                        }#}
    {##}
    {#                        count_all =count_oozie+count_kettle+count_ppdsync;#}
    {#                        if (count_all > 0)#}
    {#                            $('#treeview4 span:eq(1)').append('<small class="label pull-right bg-red">' + count_all + '</small>');#}
    {#                    }#}
    {#                });#}
    {#            }#}
    {##}
    {##}
    {#        }#}
    {#    });#}
</script>

<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. Slimscroll is required when using the
     fixed layout. -->
{% block script %}{% endblock %}
</body>